<template>
  <div class="container">
    <el-card>
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        v-if="this.$route.query.id"
        class="bread" >
                <el-breadcrumb-item>学科管理</el-breadcrumb-item>
               <el-breadcrumb-item>{{ this.$route.query.name }}</el-breadcrumb-item>
          </el-breadcrumb>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="标签名称">
          <el-input v-model="formInline.tagName"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.state" placeholder="请选择">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
          <el-button @click="eliminateFn">清除</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
        <div style="float: right">
          <el-button
            type="text"
            @click="$router.push('/subjects/list')"
            v-if="this.$route.query.id"
            >←返回学科</el-button
          >
          <el-button type="success" @click="newly">新增标签</el-button>
        </div>
      </el-form>
      <!-- 提示信息 -->
      <el-alert
        :title="cTitle"
        type="info"
        show-icon
        :closable="false"
        style="margin-bottom: 10px"
      >
      </el-alert>
      <!-- 点击新增按钮出现弹层 -->
      <!-- 父组件调用子组件里面的值 -->
      <!-- @close="closeFn":页面关闭时候的调用 -->
      <el-dialog
        :title="isModify ? '添加' : '修改'"
        :visible.sync="showForm"
        width="400px"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        @open="list"
        @close="assss"
      >
        <!-- 弹层 -->
        <el-form ref="myform" :model="form" :rules="rules">
          <el-form-item v-show="yinc" label="所属学科" label-width="30%">
            <el-select v-model="form.subjectID" placeholder="请选择">
              <el-option
                v-for="item in xList"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="tagName" label-width="30%">
            <el-input
              style="width: 90%"
              v-model="form.tagName"
              placeholder="请输入目录名称"
            ></el-input>
          </el-form-item>
          <el-button @click="dialog">取 消</el-button>
          <el-button type="primary" @click="btn">确 定</el-button>
        </el-form>

      </el-dialog>
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="120">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科" width="120">
        </el-table-column>
        <el-table-column prop="tagName" label="标签名称" width="120">
        </el-table-column>
        <el-table-column prop="username" label="创建者" width="120">
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="300">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="300">
          <template slot-scope="scope">
            {{ formatState(scope.row.state) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="Disablea(scope.row)">{{
              scope.row.state === 1 ? "禁用" : "启用"
            }}</el-button>
            <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="modify(scope.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="delFn(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="float: right; margin: 30px">
        <el-pagination
          background
          layout="sizes, prev, pager, next,jumper"
          :total="total"
          :page-size="params.pagesize"
          @size-change="handleSizeChange"
          @current-change="paging"
          :page-sizes="[5, 10, 15, 20]"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { status } from '@/api/hmmm/constants'
import { list, remove, update, add, changeState } from '@/api/hmmm/tags'
export default {
  data () {
    return {
      formInline: {
        tagName: null,
        state: null
      },
      abcd: {
        state: '',
        id: ''
      },
      params: {
        page: 1, // 默认查询第一页
        pagesize: 5 // 每页5条数据
      },
      total: 0, // 一共多少条
      xList: [],
      showForm: false, // 是否显示弹层
      tableData: [], // 标签列表
      isModify: false, // 是否处于修改状态
      form: {
        subjectID: '',
        tagName: ''
      },
      rules: {
        tagName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' },
          { min: 1, max: 6, message: '请输入1-6位目录名称', trigger: ['blur', 'change'] }
        ]
      },
      disabled: false, // 禁用按钮
      yinc: true // 是否隐藏所属学科
    }
  },
  created () {
    this.Taglist()
  },
  computed: {
    cTitle () {
      return '数据一共' + this.total + '条'
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.params.pagesize = val
      this.Taglist()
    },

    // 搜索
    async search () {
      this.Taglist()
    },
    assss () {
      this.form = {
        tagName: '',
        subjectID: ''
      }
    },
    async Disablea (data) {
      // 调用开启接口
      console.log(data.state)
      data.state === 1 ? data.state = 0 : data.state = 1
      await changeState(data)
      this.Taglist()
    },
    // 枚举
    formatState (value) {
      // 格式化状态
      const res = status.find((item) => item.value === value)
      return res.label
    },

    // 打开弹出层的时候获取数据
    async list () {
      const res = await simple()
      this.xList = res.data
      console.log(this.xList)
    },
    // 点击取消
    dialog () {
      this.showForm = false // 隐藏弹层
      this.$refs.myform.resetFields() // 清空表单校验
    },
    onSubmit () {
      console.log('submit!')
    },
    // 清除
    eliminateFn () { // 清除功能
      this.formInline = {
        tagName: null,
        subjectID: null
      }
    },
    // 新增按钮
    newly () {
      console.log(1)
      this.showForm = true // 是否显示弹层
      this.isModify = true // 是否处于修改状态
      if (this.$route.query.id) { // 判断学科有无跳转页面 , 有的话 跳转过来时隐层所属学科
        this.yinc = false
      }
    },
    // 标签列表
    async Taglist () {
      // 1 -  在学科页面 跳转到标签页时 判断传值过来的 id 和name
      if (this.$route.query.id && this.$route.query.name) {
        const res = await list()
        console.log(res)
        // 2 - 然后筛选出对应的内容 显示在标签页面
        this.tableData = res.data.items.filter(
          (item) => item.subjectName === this.$route.query.name
        )
        console.log(this.tableData)
        this.total = this.tableData.length
      } else { // 否则 还是 显示当前标签页的数据
        // this.params
        const res = await list({ ...this.formInline, ...this.params })
        console.log(res)
        //  标签列表信息
        this.tableData = res.data.items
        this.total = res.data.counts
      }
    },
    async btn () {
      // 1  添加数据时 判断 是否处于添加 并且添加的长度小于或等于6 才可以进行添加
      if (this.isModify && this.form.tagName.length <= 6) {
        // 2  添加数据 调用接口
        await add(this.form)
        this.$message.success('添加成功')
        // 3  点击确认关闭弹层
        this.dialog()
        // 4 清空表单数据
        this.form = {
          subjectID: '',
          tagName: ''
        }
        // 5 重新请求数据
        this.Taglist()
      } else { // 否则就是修改数据
        this.xiugai()
      }
    },
    // 删除
    delFn (id) {
      console.log(id)
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 1. 去做删除
          const res = await remove({ id: id })
          console.log('删除之后的结果是', res)
          // 2. 提示用户
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          if (this.tableData.length === 1) {
            this.params.page--
          }
          // 3. 更新页面- 重发请求
          this.Taglist()
        })
        .catch((err) => {
          console.log(err)
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 修改
    // 1 -  v-model 的双向数据绑定 进行修改时 输入框中的值会进行同步修改
    // 2- 用对象的形式进行传值 , 解决问题
    async modify ({ id, subjectID, tagName }) {
      this.isModify = false // 处于修改状态
      this.showForm = true // 显示表单
      this.form = { id, subjectID, tagName }
      //   this.xiugai()
    },
    async xiugai () {
      try {
        const res = await update(this.form)
        console.log('222', res)
        // 1.修改之后关闭弹层
        this.showForm = false
        // 2. 重新请求数据
        this.Taglist()
      } catch {
        // 修改失败时提示
        this.$message.info('修改失败')
      }
    },
    // 点击切换分页
    paging (e) {
      console.log(e)
      // 1.更新查询条件中页码
      this.params.page = e
      // 2 . 再发一次请求
      this.Taglist()
    }
    // 标签调用接口
  }
}
</script>

<style>
</style>
